<template>
  <div class="tabs">
    <el-card>
      <h1>{{ noticeInfo.title }}</h1>
      <div style="height: 75px; background-color: #f1f1f1">
        <text style="position: relative; left: 70px; color: #680f0f"
          >发布时间:{{ noticeInfo.create_date }}
        </text>
        <br />
        <text style="position: relative; left: 70px; color: #680f0f"
          >发布人: {{ noticeInfo.sender }}</text
        >
        <br />
        <text style="position: relative; left: 70px; color: #680f0f"
          >类型: {{ noticeInfo.type }}</text
        >
      </div>
      <el-divider />
      <div class="article-content">
        <div v-html="noticeInfo.content"></div>
      </div>
    </el-card>
  </div>
</template>

<script setup lang="ts">
  import { useRoute } from 'vue-router'
  import { onMounted, ref, onUnmounted } from 'vue'
  import watermark from '@/utils/watermark.js'
  import { useUserStore } from '@/store/modules/user'
  import { getNoticeSR } from '@/lafSdkCollection/getPBInfo'
  const route = useRoute()
  const noticeInfo = ref({
    title: '',
    sender: '',
    type: '',
    content: '',
    create_date: '',
  })
  const getInfo = async () => {
    const res = await getNoticeSR(route.query.id)
    noticeInfo.value.title = res.data[0].title
    noticeInfo.value.sender = userStore.admin
    noticeInfo.value.type = '个人通知'
    let baseTime = res.data[0].create_date
    let d = new Date(baseTime)
    let batchDate = d.getFullYear() + '年' + (d.getMonth() + 1) + '月' + d.getDate() + '日'
    noticeInfo.value.create_date = batchDate
    noticeInfo.value.content = res.data[0].content
  }
  const userStore = useUserStore()
  onMounted(() => {
    getInfo()
    setWaterMark()
  })
  const setWaterMark = () => {
    //添加水印
    watermark.set(userStore.name, userStore.num)
    //移除水印,传 null 移除水印
    //watermark.close()
  }
  onUnmounted(async () => {
    watermark.close(null)
  })
</script>

<style lang="scss" scoped>
  .tabs {
    position: absolute;
    top: 20px;
    left: 0;
    right: 0;
    margin: auto;
    width: 1000px;
    height: auto;
    background: white;
    box-shadow: 0px 1px 3px #d3d4d8;
    border-radius: 5px;
  }

  .article-content img {
    max-width: 100% !important;
  }
</style>
